<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
          <svg-icon class="primary" :icon-class="$route.meta.icon"/>
          <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
        </div>
        <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
          <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px">
<!--            <div class="report_header_query" v-if="mchType==0||mchType==3">-->
<!--              <el-select v-model="query.sysMchId" clearable placeholder="请选择商户" style="margin-left:20px" filterable-->
<!--                         value-key="id" :filter-method="querySysmch" @clear="clearSysmch" @change="changeSysMch">-->
<!--                <el-option v-for="item in mchIdOptions" :key="item.id" :label="item.name" :value="item.id">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </div>-->
            <div class="report_header_query">
              <el-input v-model="query.name" prefix-icon="el-icon-search" @clear="clearName" placeholder="请输入路线名" clearable />
            </div>
            <div class="report_header_query">
              <el-select v-model="query.shopId" style="width: 100%;" @clear="clearShop" clearable placeholder="请选择门店">
                <el-option v-for="item in shopIdOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>

          </div>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryClick">查询</el-button>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                     v-permission="['mapLine.add']">新增</el-button>
        </div>
      </div>
<!--      <div>-->
<!--        <svg-icon class="primary" :icon-class="$route.meta.icon" />-->
<!--        <span class="primary">{{ $route.meta.title }}</span>-->
<!--        <el-select v-model="query.sysMchId" clearable placeholder="请选择商户" style="margin-left:20px" v-if="mchType==0||mchType==3"-->
<!--                   filterable  value-key="id" :filter-method="querySysmch" @change="changeSysMch" >-->
<!--          <el-option v-for="item in mchIdOptions" :key="item.id"   :label="item.name" :value="item.id">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </div>-->
<!--      <div class="header-button-container">-->
<!--        <el-button :icon="queryType? 'el-icon-search':'el-icon-close'" type="primary" @click="chooseClick">{{ queryType == false?'隐藏':'查询' }}</el-button>-->
<!--        <el-button icon="el-icon-plus" type="primary" v-permission="['mapLine.add']" @click="addClick">新增</el-button>-->
<!--      </div>-->
    </el-header>
    <div class="pd10">
<!--      <div v-show="queryType == false" style="margin-bottom: 10px;display: flex;align-items: center;justify-content: space-between;">-->
<!--        <div>-->
<!--          <el-row :gutter="10">-->
<!--            <el-col :span="12">-->
<!--              <el-input v-model="query.name" prefix-icon="el-icon-search" placeholder="请输入路线名" clearable />-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-select v-model="query.shopId" style="width: 100%;" clearable placeholder="请选择门店">-->
<!--                <el-option v-for="item in shopIdOptions" :key="item.id" :label="item.name" :value="item.id" />-->
<!--              </el-select>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </div>-->
<!--        <div>-->
<!--          <el-button style="margin-left: 10px" icon="el-icon-search" type="primary" :loading="queryClicked" @click="queryClick">查询</el-button>-->
<!--          <el-button style="margin-left: 10px" icon="el-icon-refresh-right" type="info" :loading="resetClicked" @click="resetClick">重置</el-button>-->
<!--        </div>-->
<!--      </div>-->
      <el-table
        v-loadMore="[payLoads,'mapLine-list']"
        :data="mapLineForm"
        border
        stripe
        :height="curHeight"
        style="width: 100%"
      >
        <el-table-column
          label="线路名称"
          align="left"
          prop="name"
        />
        <el-table-column
          label="门店名称"
          align="left"
          prop="shopName"
        />
        <el-table-column label="操作" fixed="right" align="center" width="80">
          <template slot-scope="scope">
            <div>
              <el-tooltip v-permission="['mapLine.edit']" class="item" effect="dark" content="编辑" placement="top-start">
                <a @click="editClick(scope.row)">
                  <i style="color: #409EFF" class="el-icon-edit" />
                </a>
              </el-tooltip>
              <el-tooltip v-permission="['mapLine.del']" class="item" effect="dark" content="删除" placement="top-start">
                <a style="margin-left: 10px" @click="deleteMapLine(scope.row)">
                  <i style="color: #F56C6C" class="el-icon-delete" />
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-footer class="el-footerBox">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="loadMapLine"
      />
    </el-footer>
  </el-container>
</template>

<script>
import loadMore from '@/utils/loadMore.js'
import permission from '@/directive/permission/index.js' // 权限判断指令
import { list, del } from '@/api/mapLine'
import Pagination from '@/components/Pagination'
import { list as shopList } from '@/api/shop'
import { EventBus } from '@/api/eventBus'
import { getInfo, list as sysMchList } from '@/api/sysMch'

export default {
  name: 'MapLine',
  directives: { permission, loadMore },
  components: { Pagination },
  filters: {},
  data() {
    return {
      queryType: true,
      mchType:'',
      mchIdOptions:[],
      query: {
        name: '',
        sysMchId:'',
        shopId: ''
      },
      keyword: {
        name: '',
        shopId: ''
      },
      queryClicked: false,
      resetClicked: false,
      shopIdOptions: [],
      curHeight: null,
      payLoads: '',
      mapLineForm: [],
      pageNum: 1,
      pageSize: 20,
      total: 0
    }
  },
  activated() {
    this.payLoads = new Date().getTime()
  },
  created() {
    this.loadMapLine()
    this.loadSysmch('')
    this.loadMch()
    EventBus.$on('mapLine-add', res => { // 监听添加
      this.loadMapLine()
    })
    EventBus.$on('mapLine-edit', res => { // 监听修改
      // 更新列表数组
      for (var i = 0; i < this.mapLineForm.length; i++) {
        if (this.mapLineForm[i].id == res.id) {
          this.$set(this.mapLineForm, i, res)
        }
      }
    })
  },
  mounted() {
    this.comeIn()
    this.beforeMount()
    this.getShop()
  },
  methods: {
    clearSysmch(){
      this.query.sysMchId=''
    },
    clearShop(){
      this.query.shopId=''
    },
    clearName(){
      this.query.name=''
    },
    loadSysmch(query){
      sysMchList({ name: query }).then(res => {
        this.mchIdOptions = res.data.data.filter(val => { return val.mchType === 3||val.mchType === 1 })
      }).catch(err => { console.log(err) })
    },
    changeSysMch(){
      this.loadMapLine()
    },
    querySysmch(query){
      this.loadSysmch(query)
    },
    loadMch(){
      getInfo().then(res=>{
        console.info("商户的信息***************************")
        console.info(res)
        this.mchType=res.data.mchType
      })
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 266// 减去页面上固定高度height
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 220// 减去页面上固定高度height
          }
        })()
      }
    },
    comeIn() {
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 220// 减去页面上固定高度height
    },
    chooseClick() {
      this.queryType = !this.queryType
      if (this.queryType == false) {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 266// 减去页面上固定高度height
      } else {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 220// 减去页面上固定高度height
      }
    },
    queryClick() {
      this.queryClicked = true
      this.keyword = this.query
      this.pageNum = 1
      this.loadMapLine()
    },
    resetClick() {
      this.resetClicked = true
      this.query.name = ''
      this.query.shopId = '',
      this.pageNum = 1
      this.loadMapLine()
    },
    getShop() { // 获取仓库
      shopList().then(res => {
        this.shopIdOptions = res.data.data
      }).catch(err => {
        console.log(err)
      })
    },
    // 新增
    addClick() {
      this.$router.push({
        path: '/mapLine/add'
      })
    },
    //  编辑
    editClick(row) {
      this.$router.push({
        path: '/mapLine/edit?id=' + row.id
      })
    },
    loadMapLine() {
      const params = new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.pageSize)
      params.append('name', this.keyword.name)
      params.append('mchId',this.query.sysMchId)
      params.append('shopId', this.keyword.shopId)
      list(params).then(response => {
        console.log(response)
        this.queryClicked = false
        this.resetClicked = false
        this.mapLineForm = response.data.data
        this.total = response.data.total
      }).catch(error => {
        this.queryClicked = false
        this.resetClicked = false
        console.log('error!!')
      })
    },
    deleteMapLine(data) {
      console.log(data)
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(data.id).then(response => {
          console.log(response)
          this.mapLineForm.forEach((item, index) => {
            if (item.id == data.id) {
              this.mapLineForm.splice(index, 1)
            }
          })
          this.$message({
            message: response.content,
            offset: 120,
            center: true
          })
        }).catch(error => {
          console.log('error!!')
        })
      }).catch(() => {

      })
    }
  }
}
</script>
<style scoped>
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #eeeeee;
  }

  /deep/ .el-dialog__header {
    border: 1px solid #eeeeee !important;
    padding: 15px !important;
  }

  /deep/ .el-dialog__body {
    padding: 0px 20px !important;
  }

  .popup_content {
    padding-bottom: 0px !important;
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
